<template>
  <div class="WxZydh-Page">
    <div style="height: 50px"></div>
    <div class="header">
      <div class="nav">全部</div>
      <div class="abc">
        <div class="ull">
          <ul class="ul">
            <li v-for="leibie in leibies">
              <router-link :to='leibie.tiao+leibie.id'>{{leibie.leibiename}}</router-link>
            </li>
          </ul>
        </div>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WxZydh',
    data() {
      return {
        leibies:{}
      }
    },
    computed:{},
    mounted() {
      this.$http.get('/leibie').then(resp=>{
        this.leibies = resp.data;
        console.log(resp.data)
      }).catch(err=>console.log(err));
    },
    methods: {
    }
  }
  function leibie(data) {
    var html='';
    for(let data1 of data){
      html +=`<li>`
      html +=`<a href="/#${data1.tiao}?id=${data1.id}" @click="doLogin(${data1.id})">${data1.leibiename}</a>`
      html+=`</li>`
    }
    return html;
  }
</script>
<style lang="less">
  .WxZydh-Page {
    min-width: 320px;max-width:1024px ;
    height: 100%;margin: auto;
  }
  ul{list-style-type: none;
    margin:0px;padding: 0;}
  .body{
    height: 100%;
  }
  .ull{
    width: 80%;
    height: 50px;overflow-x: scroll;overflow-y: hidden;
    position: relative;}
  ul:after{
    width: 0;
    height: 0;display: table;content: " ";clear: both}
  ul.ul{width: 145%;
    height: 50px;
    position: absolute;left: 0;top: 0;line-height: 50px}
  .header{
    min-width: 320px;max-width:700px ;
    width: 100%;
    background: linear-gradient(olivedrab,olive);
    top: 0;height: 50px ;position:fixed;z-index: 50;
  }
  a{color: white}
  .nav{height: 50px;width:20%;float: left;line-height: 50px;color: white;text-align: center;background: linear-gradient(seagreen,mediumseagreen);}
  .ul>li{
    float: left; margin-right: 7px;margin-left: 7px;
  }
  .a{height: 50px;width: 100%; background-color: olivedrab}
  ::-webkit-scrollbar
  {
    width: 5px;
    height: 5px;
    background-color: olive;
  }
</style>
